<template>
	<view class="box">
		<template v-if="showAddForm===1">
			<view class="form_box">
			<addTodoFrom></addTodoFrom>
			</view>
		</template>
		<template v-if="showAddForm===2">
			<view class="form_box">
			<addDliary></addDliary>
			</view>
		</template>
		<template v-if="showAddForm===3">
			<view class="form_box">
			<addAccount></addAccount>
			</view>
		</template>
		<template v-if="showAddForm===4">
			<view class="form_box">
			form_box4
			</view>
		</template>
		<mu-container>
			<!-- <mu-flex justify-content="center">
		    <mu-button @click="openBotttomSheet">OPEN Bottom Sheet</mu-button>
		  </mu-flex> -->
			<mu-bottom-sheet :open.sync="$store.state.showAddList">
				<mu-list>
					<mu-sub-header>
						<mu-icon value="添加事件" color="black"></mu-icon>
					</mu-sub-header>

					<mu-list-item button @click="goAddToDo(1)">
						<mu-list-item-action>
							<mu-icon value="待办" color="orange"></mu-icon>
						</mu-list-item-action>
						<mu-list-item-title><text class="iconfont icon-daiban"></text></mu-list-item-title>
					</mu-list-item>

					<mu-list-item button @click="goAddToDo(2)">
						<mu-list-item-action>
							<mu-icon value="日记" color="blue"></mu-icon>
						</mu-list-item-action>
						<mu-list-item-title><text class="iconfont icon-jilu"></text></mu-list-item-title>
					</mu-list-item>

					<mu-list-item button @click="goAddToDo(3)">
						<mu-list-item-action>
							<mu-icon value="记账" color="green"></mu-icon>
						</mu-list-item-action>
						<mu-list-item-title><text class="iconfont icon-jilu"></text></mu-list-item-title>
					</mu-list-item>

					<mu-list-item button @click="goAddToDo(4)">
						<mu-list-item-action>
							<mu-icon value="树洞" color="cyan"></mu-icon>
						</mu-list-item-action>
						<mu-list-item-title><text class="iconfont icon-kaixin"></text></mu-list-item-title>
					</mu-list-item>

				</mu-list>
			</mu-bottom-sheet>
		</mu-container>
		<view class="addBtn">
			<mu-button fab color="#1B9ADC" @click="openButtonList">
				<text class="iconfont icon-jia"></text>
			 </mu-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import addTodoFrom from '../../components/addTodoFrom.vue'
	import addDliary from '../../components/addDliary.vue'
	import addAccount from '../../components/addAccount.vue'

	export default {
		data() {
			return {
				
			};
		},
		computed: {
			...mapState(['addlist','showAddList','showAddForm'])
		},
		onShow() {
			this.$store.commit('setShowAddList',false);
		},
		onLoad() {
			// this.$store.commit('setShowAddList',!this.showAddList);
		},

		methods: {
			openButtonList(){
			this.$store.commit('setShowAddList',true);
			},
			closeBottomSheet(reason) {
			this.$store.commit('setShowAddList',false);
			},
			closeAndSetFromShow(e){
			this.$store.commit('setShowAddList',false);
		    this.$store.commit('setShowAddForm',e);
			},
			goAddToDo(e) {
				
				switch (e) {
					case 1:
						console.log(e);
					this.closeAndSetFromShow(e);
						break;
					case 2:
						console.log(e);
						this.closeAndSetFromShow(e);
						break;
					case 3:
						console.log(e);
						this.closeAndSetFromShow(e);
						break;
					case 4:
						console.log(e);
						this.closeAndSetFromShow(e);
						break;
					default:
						console.log("error");
				}
			}
		},
		components:{
			addTodoFrom,
			addDliary,
			addAccount
		}
	}
</script>

<style lang="less">
.button-wrapper {
  text-align: center;
  .mu-button{
    margin: 8px;
    vertical-align: middle;
  }
  a.mu-button {
    text-decoration: none;
  }
}
.box{
	position: relative;
	.addBtn{
		position: absolute;
		top: 1000rpx;
		right: 38rpx;
	}
}

</style>
